<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>酷狗歌单</title>
    <style>
      body,
      p {
        margin: 0;
      }
      .music-selected {
        width: 480px;
        height: 480px;
        border: 1px solid red;
        margin: 50px auto 0px;
      }
      .music-selected a {
        display: block;
        height: 480px;
        background-color: beige;
        position: relative;
      }
      .music-selected a .music-number {
        height: 35px;
        width: 200px;
        position: absolute;
        top: 0px;
        right: 0px;
        background-color: aliceblue;
        background-image: linear-gradient(
          to left,
          rgba(0, 0, 0, 0.219),
          rgba(255, 255, 255, 0.218)
        );
      }
    </style>
  </head>
  <body>
    <div class="music-selected">
      <a href="#">
        <img src="/images/kugou-img1.jpg" alt="" width="480px" />
        <p class="music-number">
          <span class="icon-earphone"></span>
          <span class="number-txt">679.9万</span>
        </p>
      </a>
    </div>
  </body>
</html>
